<template>
  <view class="component-page">
    <view class="page-title">组件</view>
    <view class="component-category" v-for="(item, index) in componentData" :key="index">
      <view class="category-title">{{ item.category }}</view>
      <view class="component-item" v-for="(comp, cIndex) in item.components" :key="cIndex">
        {{ comp }}
      </view>
    </view>
    <PageNav currentPage="component" />
  </view>
</template>

<script setup>
import PageNav from '@/components/PageNav.vue';

const componentData = [
  { category: "1.容器", components: ["view视图"] },
  { category: "2.基础内容", components: ["text文本编辑", "icon图标"] },
  { category: "3.表单组件", components: ["button按钮", "checkbox多选框", "label标签组件", "input输入框", "textarea多行文本输入框", "form表单"] },
  { category: "4.导航组件", components: ["navigator"] },
  { category: "5.多媒体组件", components: ["image图片组件"] }
];
</script>

<style scoped>
.component-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  text-align: center;
}
.component-category {
  margin-bottom: 12rpx;
}
.category-title {
  font-size: 28rpx;
  color: #333;
  padding: 6rpx 12rpx;
  background-color: #c8e6c9;
  border-radius: 4rpx;
  margin-bottom: 8rpx;
}
.component-item {
  font-size: 26rpx;
  color: #333;
  padding: 4rpx 0;
  padding-left: 20rpx;
}
</style>